<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="../../../../static/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../../../static/css/ylb.css">
	<link rel="shortcut icon" href="../../../../static/img/logo.png">
	<link rel="stylesheet" href="app.css">
	<script type="text/javascript" src="../../../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../../../static/js/popper.min.js"></script>
	<script type="text/javascript" src="../../../../static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../../../static/js/qrcode.min.js"></script>
	<script type="text/javascript" src="../../../../static/js/clipboard.min.js"></script>
	<script type="text/javascript" src="./app.js"></script>
</head>
<body>
    
    <div id="app">
    	
    	<!-- 左侧 -->
    	<div class="left">
    		<div class="dhview">
    
    			<!-- LOGO -->
    			<a href="../../../index/" class="index">
    			    <div class="logo"></div>
    			</a>
    
    			<!-- 导航 -->
			<ul>
			    <a href="../../../index/" >
			    <li class="nav-li">
			        <i class="icon i-data"></i>
			        <span class="nav-text">数据</span>
			    </li>
			    </a>
			    
			    <a href="../../../qun/">
			    <li class="nav-li">
			        <i class="icon i-hm"></i>
			        <span class="nav-text">活码</span>
			    </li>
			    </a>
			    
				<a href="../../../dwz/">
				<li class="nav-li">
				    <i class="icon i-dwz"></i>
				    <span class="nav-text">短网址</span>
				</li>
				</a>
				
				<a href="../../../tbk/">
				<li class="nav-li">
				    <i class="icon i-tbk"></i>
				    <span class="nav-text">淘宝客</span>
				</li>
				</a>
				
				<a href="../../../shareCard/">
				<li class="nav-li">
				    <i class="icon i-share"></i>
				    <span class="nav-text">分享卡片</span>
				</li>
				</a>
				
				<a href="../../../plugin/" class="selected">
				<li class="nav-li">
				    <i class="icon i-plugin-dark"></i>
				    <span class="nav-text">插件中心</span>
				</li>
				</a>
				
				<a href="../../../kami/">
				<li class="nav-li">
				    <i class="icon i-kami"></i>
				    <span class="nav-text">卡密分发</span>
				</li>
				</a>
				
				<a href="../../../config/">
				<li class="nav-li">
				    <i class="icon i-config"></i>
				    <span class="nav-text">配置中心</span>
				</li>
				</a>
				
				<a href="../../../sucai/">
				<li class="nav-li">
				    <i class="icon i-sucai"></i>
				    <span class="nav-text">素材管理</span>
				</li>
				</a>
				
				<a href="../../../user/">
				<li class="nav-li">
				    <i class="icon i-account"></i>
				    <span class="nav-text">账号管理</span>
			    </li>
			    </a>
			</ul>
    
    			<!-- 账号 -->
    			<div class="account">加载中...</div>
    		    
    		</div>
    	</div>
    
    	<!-- 右侧 -->
    	<div id="right">
    	    
    	    <!--面板标题-->
    		<h3>
    		    <a href="./" class="mianbaoxie_a">插件中心</a> ➜ <span class="mbx">微信外链</span> 
		    </h3>
		    
		    <!--数据区域-->
    		<div class="data-card">
    		    
    			<!-- 按钮区域 -->
    			<div class="button-view" id="button-view" style="display:none;">
    			    
    				<!--flex布局按钮容器-->
    			    <div class="flex-button-view">
    			        
    			        
        			    <!--导航-->
        			    <div class="button-daohang">
        			        <!--返回按钮-->
            			    <a href="../../">
            			        <div class="back-lastpage"></div>
            			    </a>
        			        <button class="default-btn">外链管理</button>
        			    </div>
        			    
        			    <!--功能-->
        			    <div class="button-gongneng">
        			        
        			        <button class="tint-btn" 
            				data-toggle="modal" 
            				data-target="#createJwModal" 
            				onclick="getDomainNameList('create')" style="margin-left:5px;">创建外链</button>
        			    </div>
    			    </div><!-- flex-button-view -->
    			</div>
    
    			<!-- 列表区域 -->
    			<div class="data-list">
    			    
    				<table class="table">
    				    <thead></thead>
    				    <tbody></tbody>
    				</table>
    			</div><!-- data-list -->
    			
    			<p class="loading" style="display: none;"></p>
    			
    			<!-- 分页 -->
    			<div class="fenye"></div>
    			
    		</div><!-- data-card -->
    	</div><!-- right -->
    
    	<!-- 创建链接 -->
        <div class="modal fade" id="createJwModal">
            
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    
                        <!-- 头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">创建外链</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        
                        <!-- 表单 -->
                        <div class="modal-body">
                            <form id="createJw" enctype="multipart/form-data">
                            
                            <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                                <div style="flex:1;margin-right:7px;">
                                    <span class="text">链接标题</span>
                                    <input type="text" name="jw_title" class="form-control" autocomplete="off" placeholder="卡片显示的标题">
                                </div>
                                <div style="flex:1;margin-left:20px;">
                                    <span class="text">域名（使用对象存储域名）</span>
                                    <select name="jw_dxccym" class="form-control" title="选择用于跳转的域名"></select>
                                </div>
                            </div>
                            
                            <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                                <div style="flex:1;margin-right:7px;">
                                    <span class="text">分享图</span>
                                    <div class="upload-input" title="分享卡片的封面图、图标就是用这个图片">
                                        <input type="text" name="jw_icon" class="form-control" autocomplete="off" placeholder="粘贴图片链接或上传">
                                        <span class="input-group-text">
                                            <span id="chooseIMG" onclick="getSuCai('1','createJwModal');">上传图片</span>
                                        </span>
                                    </div>
                                </div>
                                <div style="flex:1;margin-left:20px;">
                                    <span class="text">备注&摘要</span>
                                    <input type="text" name="jw_beizhu" class="form-control" autocomplete="off" placeholder="副标题、描述文字、备注等" title="如果是抖音卡片，这里就是卡片的第二行小文字">
                                </div>
                            </div>
                            
                            <span class="text">投放平台</span>
                            <div class="toufang_Platform" title="投放平台的选择仅用于决定落地页展示的动态logo">
                                <span class="toufang_Platform_tag not-select" data-jw_platform="douyin">
                                    <img src="img/jw_platform_icon_douyin.png" />抖音
                                </span>
                                <span class="toufang_Platform_tag not-select" data-jw_platform="kuaishou">
                                    <img src="img/jw_platform_icon_kuaishou.png" />快手
                                </span>
                                <span class="toufang_Platform_tag not-select" data-jw_platform="xhs">
                                    <img src="img/jw_platform_icon_xhs.png" />小红书
                                </span>
                                <span class="toufang_Platform_tag not-select" data-jw_platform="weibo">
                                    <img src="img/jw_platform_icon_weibo.png" />微博
                                </span>
                                <span class="toufang_Platform_tag not-select" data-jw_platform="zhihu">
                                    <img src="img/jw_platform_icon_zhihu.png" />知乎
                                </span>
                                <span class="toufang_Platform_tag not-select" data-jw_platform="common">
                                    <img src="img/jw_platform_icon_common.png" />通用
                                </span>
                            </div>
                            
                            <span class="text">选择跳转的小程序</span>
                            <div class="jumpPlatform">
                                <span class="jumpMiniPro not-selecte" data-tag="urlscheme" title="自建小程序选择这个">
                                    <img src="img/urlscheme.png" />自建小程序
                                </span>
                                <span class="jumpMiniPro not-selecte" data-tag="caoliaoqrcode">
                                    <img src="img/caoliaoqrcode.png" />草料二维码
                                </span>
                                <span class="jumpMiniPro not-selecte" data-tag="jinshandoc">
                                    <img src="img/jinshandoc.png" />金山文档
                                </span>
                                <span class="jumpMiniPro not-selecte" data-tag="tencentdoc">
                                    <img src="img/tencentdoc.png" />腾讯文档
                                </span>
                                <span class="jumpMiniPro not-selecte" data-tag="workwxpan">
                                    <img src="img/workwxpan.png" />企业微盘
                                </span>
                                <span class="jumpMiniPro not-selecte" data-tag="csdn">
                                    <img src="img/csdn.png" />CSDN小程序 
                                </span>
                            </div>
                            
                            <div class="mb-url urlscheme" style="display:none;">
                                <span class="text"><b>自建小程序生成URLScheme</b></span>
                                <div style="width:100%;height:70px;margin:-5px auto 10px;display:flex;">
                                    <div style="flex:1;margin-right:7px;">
                                        <span class="text">小程序Appid</span>
                                        <input type="text" name="jw_xcx_appid" class="form-control" placeholder="小程序Appid">
                                    </div>
                                    <div style="flex:1;margin-left:20px;">
                                        <span class="text">小程序AppSecret</span>
                                        <input type="text" name="jw_xcx_appsecret" class="form-control" placeholder="小程序AppSecret">
                                    </div>
                                </div>
                                
                                <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                                    <div style="flex:1;margin-right:7px;">
                                        <span class="text">跳转路径</span>
                                        <input type="text" name="jw_xcx_path" class="form-control" placeholder="pages/xxx/xxx">
                                    </div>
                                    <div style="flex:1;margin-left:20px;">
                                        <span class="text">路径参数</span>
                                        <input type="text" name="jw_xcx_query" class="form-control" placeholder="id=123&token=456" title="如果你的路径无需传递参数可留空">
                                    </div>
                                </div>
                                <span class="text" style="margin-top:25px;">或者直接粘贴从其他地方创建的URLScheme</span>
                                <input type="text" name="jw_xcx_urlscheme" class="form-control" autocomplete="off" placeholder="手头上已经有URLScheme就直接粘贴到这里" title="手头上已经有URLScheme就直接粘贴到这里">
                                <a href="how-to-get/urlscheme.html" class="how-to-get" target="_blank">如何使用自建小程序？</a>
                            </div>
                            
                            <div class="mb-url caoliaoqrcode" style="display:none;">
                                <span class="text"><b>公众号嵌入链接</b></span>
                                <input type="text" name="jw_caoliaoqrcode" class="form-control" autocomplete="off" placeholder="粘贴公众号嵌入链接">
                                <a href="how-to-get/caoliaoqrcode.html" class="how-to-get" target="_blank">如何获取公众号嵌入链接？</a>
                            </div>
                            <div class="mb-url jinshandoc" style="display:none;">
                                <span class="text"><b>金山文档链接</b></span>
                                <input type="text" name="jw_jinshandoc" class="form-control" autocomplete="off" placeholder="粘贴金山文档链接">
                                <a href="how-to-get/jinshandoc.html" class="how-to-get" target="_blank">如何获取金山文档链接？</a>
                            </div>
                            <div class="mb-url tencentdoc" style="display:none;">
                                <span class="text"><b>腾讯文档链接</b></span>
                                <input type="text" name="jw_tencentdoc" class="form-control" autocomplete="off" placeholder="粘贴腾讯文档链接">
                                <a href="how-to-get/tencentdoc.html" class="how-to-get" target="_blank">如何获取腾讯文档链接？</a>
                            </div>
                            <div class="mb-url workwxpan" style="display:none;">
                                <span class="text"><b>网盘分享链接</b></span>
                                <input type="text" name="jw_workwxpan" class="form-control" autocomplete="off" placeholder="粘贴网盘分享链接">
                                <a href="how-to-get/workwxpan.html" class="how-to-get" target="_blank">如何获取网盘分享链接？</a>
                            </div>
                            <div class="mb-url csdn" style="display:none;">
                                <span class="text"><b>CSDN博客链接</b></span>
                                <input type="text" name="jw_csdnblog" class="form-control" autocomplete="off" placeholder="粘贴CSDN博客链接">
                                <a href="how-to-get/csdn.html" class="how-to-get" target="_blank">如何获取CSDN博客链接？</a>
                            </div>
                            
                            <input type="hidden" name="jw_platform" id="selected_platform" value="douyin" />
                            <input type="hidden" name="selectedTag" id="selected_tag" />
                            </form>
                        </div><!-- modal-body -->
                        
                        <!-- 底部操作 -->
                        <div class="modal-footer">
                            <div class="footer-btn">
                            <div class="faqnav" title="阅读使用指南">
                                <span class="faq">
                                    <a href="../faq.php?faq=jw" target="_blank">?</a>
                                </span>
                            </div>
                            <div class="btnnav">
                                <button type="button" class="default-btn" onclick="createJw();">立即创建</button>
                            </div>
                        </div>
                        
                    </div><!-- modal-footer -->
                    
                    <!-- 操作反馈 -->
                    <div class="result"></div>
                    
                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- createJwModal -->
      	
      	<!-- 编辑链接 -->
        <div class="modal fade" id="editJwModal">
            
            <div class="modal-dialog">
                <div class="modal-content">
                    
                        <!-- 头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">编辑链接</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        
                        <!-- 表单 -->
                        <div class="modal-body">
                            <form id="editJw" enctype="multipart/form-data">
                            <span class="text">链接标题</span>
                            <input type="text" name="jw_title" class="form-control" autocomplete="off" placeholder="卡片显示的标题">
                            
                            <span class="text">域名（使用对象存储域名）</span>
                            <select name="jw_dxccym" class="form-control" title="选择用于跳转的域名"></select>
                            
                            <span class="text">分享图</span>
                            <div class="upload-input">
                                <input type="text" name="jw_icon" class="form-control" autocomplete="off" placeholder="粘贴图片链接或上传">
                                <span class="input-group-text">
                                    <span id="chooseIMG" onclick="getSuCai('1','editJwModal');">上传图片</span>
                                </span>
                            </div>
                            
                            <span class="text">备注&摘要</span>
                            <input type="text" name="jw_beizhu" class="form-control" autocomplete="off" placeholder="副标题、描述文字、备注等" title="如果是抖音卡片，这里就是卡片的第二行小文字">
                            
                            <span class="text">投放平台</span>
                            <select name="jw_platform" class="form-control" title="仅用于决定落地页的跳转图标">
                                <option value="douyin">抖音</option>
                                <option value="kuaishou">快手</option>
                                <option value="xhs">小红书</option>
                                <option value="weibo">微博</option>
                                <option value="zhihu">知乎</option>
                                <option value="common">通用</option>
                            </select>
                            
                            <span class="text">目标链接</span>
                            <input type="text" name="jw_url" class="form-control" autocomplete="off" placeholder="要跳转到微信的URLScheme（weixin://dl/...）">
                            
                            <!--ID，隐藏域-->
                            <input type="hidden" name="jw_id">
                            
                            </form>
                        </div><!-- modal-body -->
                        
                        <!-- 底部操作 -->
                        <div class="modal-footer">
                            <div class="footer-btn">
                            <div class="faqnav" title="阅读使用指南">
                                <span class="faq">
                                    <a href="../faq.php?faq=jw" target="_blank">?</a>
                                </span>
                            </div>
                            <div class="btnnav">
                                <button type="button" class="default-btn" onclick="editJw();">提交编辑</button>
                            </div>
                        </div>
                        
                    </div><!-- modal-footer -->
                    
                    <!-- 操作反馈 -->
                    <div class="result"></div>
                    
                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- editJwModal -->
      	
      	<!-- 确定删除链接 -->
        <div class="modal fade" id="delJwModal">
            
            <div class="modal-dialog">
                <div class="modal-content">
                    
                    <!-- 头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">删除链接</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    
                    <!-- 内容 -->
                    <div class="modal-body">
                        将会删除该链接！删除后无法恢复。
                    </div>
                    
                    <!-- 底部操作 -->
                    <div class="modal-footer"></div>
                    
                    <!-- 操作反馈 -->
                    <div class="result"></div>
                    
                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- delJwModal -->
        
        <!-- 分享链接 -->
        <div class="modal fade" id="ShareJwModal">
            
            <div class="modal-dialog">
                <div class="modal-content">
                    
                    <!-- 头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">分享链接</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    
                    <!-- 表单 -->
                    <div class="modal-body">
                        <div class="box">
                            <div class="longUrl"><span class="text">链接：</span><span id="longUrl"></span></div>
                            <div class="Qrcode" id="shareQrcode"></div>
                            <p style="text-align:center;font-size:15px;color:#999;">扫码预览</p>
                        </div>
                    </div><!-- modal-body -->
                    
                    <!-- 底部操作 -->
                    <div class="modal-footer"></div>
                    
                    <!-- 操作反馈 -->
                    <div class="result"></div>
                    
                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- ShareJwModal -->
        
        <!--素材库-->
        <div class="modal fade" id="suCaiKu">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    
                    <!-- 头部 -->
                    <div class="modal-header" title="点击右上角&times;可返回二维码列表">
                        <h4 class="modal-title">素材库</h4>
                        <span class="hideSuCaiPannel_closeIcon"></span>
                    </div>
                    
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="sucai-upload">
                            <button type="button" class="default-btn upload_sucai_button">
                                <span>上传素材</span>
                                <form id="uploadTosuCaiKuForm" enctype="multipart/form-data">
                                    <input type="file" name="file" class="upload_sucai" accept="image/*" id="uploadTosuCaiKu" />
                                    <input text="text" name="upload_sucai_fromPannel" style="display:none;" />
                                </form>
                            </button>
                        </div>
                        
                        <!--素材容器-->
                        <div class="sucai-view"></div>
                        
                        <!--分页-->
                        <div class="fenye"></div>
                    </div>
                    
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <div class="footer-btn">
                        	<div class="faqnav" title="阅读使用指南">
                        	    <span class="faq"><a href="../faq.php?faq=qun" target="_blank">?</a></span>
                        	</div>
                        	<div class="btnnav">
                        	    <button type="button" class="default-btn" data-dismiss="modal" onclick="hideSuCaiPannel()">取消</button>
                        	</div>
                        </div>
                    </div>
                    
                    <!-- 操作反馈 -->
                    <div class="result"></div>
                    
                </div>
            </div>
        </div><!-- suCaiKu -->
        
        <!-- 全局信息提示框 -->
        <div id="notification">
            <div id="notification-text"></div>
        </div>
    
    </div><!-- app -->
    
    <script>
    
        $(document).ready(function(){
            var previousButton = null;
        
            // 延迟添加默认样式
            setTimeout(function() {
                var firstButton = $('.jumpPlatform .not-selecte').first();
                firstButton.removeClass('not-selecte').addClass('is-selected');
                previousButton = firstButton;
                var firstTag = firstButton.data('tag');
                $('.' + firstTag).show();
                $('#selected_tag').val(firstTag);
            }, 100); // 100 毫秒延迟
        
            $('.jumpPlatform .not-selecte').click(function(){
                var platformTag = $(this).data('tag');
                $('#selected_tag').val(platformTag);
        
                // 隐藏所有内容 div
                $('.urlscheme, .caoliaoqrcode, .jinshandoc, .tencentdoc, .workwxpan, .csdn').hide();
        
                // 显示当前按钮对应的内容 div
                $('.' + platformTag).show();
        
                // 如果有之前点击的按钮，将其恢复原样
                if (previousButton && previousButton[0] !== this) {
                    previousButton.removeClass('is-selected').addClass('not-selecte');
                }
        
                // 将当前按钮类更改为 .is-selected
                $(this).removeClass('not-selecte').addClass('is-selected');
        
                // 更新 previousButton 为当前按钮
                previousButton = $(this);
            });
            
            // 投放平台选择
            $(".toufang_Platform_tag").first().removeClass("not-selecte").addClass("is-selected");
            $(".toufang_Platform_tag").click(function() {
                $(".toufang_Platform_tag").removeClass("is-selected").addClass("not-selecte");
                $(this).removeClass("not-selecte").addClass("is-selected");
                var platform = $(this).data("jw_platform");
                $('input[name="jw_platform"]').val(platform);
            });
        });
        
        // 上传至素材库
        $("#uploadTosuCaiKu").change(function(e){
            
            // 获取选择的文件
            var fileSelect = e.target.files;
            if(fileSelect.length>0){
                
                // file表单数据
                var imageData = new FormData(document.getElementById("uploadTosuCaiKuForm"));
                
                // 获取fromPannel
                var fromPannel = $('#suCaiKu input[name="upload_sucai_fromPannel"]').val();
                
                // 异步上传
                $.ajax({
                    url:"../../../public/uploadToSuCaiKu.php",
                    type:"POST",
                    data:imageData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        
                        if(res.code == 200){
                            
                            // 上传成功
                            // 重新获取素材列表
                            getSuCai(1,fromPannel);
                        }else{
                            
                            // 上传失败
                            showErrorResult(res.msg)
                        }
                        
                        // 清空file控件的选择
                        $('#uploadTosuCaiKu').val('');
                    },
                    error: function() {
                        
                        // 上传失败
                        alert('上传至素材库失败！')
                    }
                })
            }
        })
    </script>
</body>
</html>